<template>
  <div
    class="forced-slider"
    @mousemove.stop="mousemove"
  >
    <div class="forced-tip-wrapper">
      <span
        ref="forcedTipsText"
        class="forced-tip-text"
        :style="{
          left: `${tipLeft}%`,
          '--left-border-ratio': leftBorderRatio,
          '--right-border-ratio': 2 - leftBorderRatio,
          '--triangle-ratio': `${triangleRatio}%`
        }"
      >
        {{ title }}
      </span>
    </div>
    <div class="forced-slider-wrapper">
      <div class="forced-slider-handler"></div>
      <div
        class="forced-slider-thumb"
        :style="{left: `${left}%`}"
        @mousedown.stop="mousedown"
        @mousemove.stop="mousemove"
      >
        <div class="forced-slider-thumb-circle"></div>
      </div>
      <div
        ref="forceSlider"
        class="forced-slider-track"
        @click="choose"
      ></div>
      <div class="forced-slider-scales">
        <span
          v-for="i in (max - min)"
          :key="i"
          :title="tips[i-1]"
          class="forced-slider-scale"
          @click="choose"
        ></span>
      </div>
    </div>
    <div
      v-if="tips"
      class="forced-slider-descriptions"
      @click="choose"
    >
      <span class="forced-slider-description">
        {{ tips[0] }}
      </span>
      <span class="forced-slider-description">
        {{ tips[Math.floor(tips.length / 2)] }}
      </span>
      <span class="forced-slider-description">
        {{ tips[tips.length - 1] }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ForcedSlider',
  model: {
    prop: 'value',
    event: 'input',
  },
  props: {
    min: Number,
    max: Number,
    value: Number,
    tips: Array,
    active: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      ifMove: false,
      left: 0,
      trackLeft: 0,
      trackWidth: 1,
      tipLeft: 0,
      /**
       * 描述框下方“角”的左边与正常长度比
       */
      leftBorderRatio: 1,
      /**
       * “角”的于框的移动范围[20%, 80%]
       */
      triangleRatio: 30,
    }
  },
  computed: {
    title() {
      const that = this
      this.$nextTick(() => {
        const width = this.$refs.forcedTipsText.offsetWidth
        // 滑块当前相对向左移动的像素量
        const left = (that.left * that.trackWidth) / 100
        const halfTipWidth = width / 2
        // 滑块在描述框中线的左边
        if (left < halfTipWidth) {
          // ”角“向左倾斜幅度
          that.leftBorderRatio = 1 - ((halfTipWidth - left) / halfTipWidth)
          // ”角“向左移动幅度
          that.triangleRatio = (left / halfTipWidth) * 30
        } else {
          // 恢复初始状态
          that.leftBorderRatio = 1
          that.triangleRatio = 30
        }
        const leftPos = left - halfTipWidth
        const maxPos = that.trackWidth - width
        that.tipLeft = (Math.min(Math.max(leftPos, 0), maxPos) / that.trackWidth) * 100
        // 滑块在描述框中线右边
        if (leftPos > maxPos) {
          // ”角“向右倾斜幅度
          this.leftBorderRatio = 1 + ((left - maxPos - halfTipWidth) / halfTipWidth)
          // ”角“向右移动幅度
          that.triangleRatio = ((left - maxPos - halfTipWidth) / halfTipWidth) * 30 + 30
        }
      })
      return this.tips[this.current]
    },
    current() {
      return Math.round((this.left * (this.tips.length - 1)) / 100)
    },
  },
  watch: {
    value(val) {
      this.left = (val * 100) / (this.tips.length - 1)
      // console.log(this.left, '===============================watch')
    },
  },
  created() {
    window.addEventListener('mouseup', this.mouseup.bind(this))
  },
  mounted() {
    // console.log('current', this.current)
    function getLeft(e) {
      let offset = e.offsetLeft
      if (e.offsetParent != null) offset += getLeft(e.offsetParent)
      return offset
    }
    const left = getLeft(this.$refs.forceSlider)
    const width = this.$refs.forceSlider.offsetWidth
    this.trackLeft = left
    this.trackWidth = Math.max(width, 1)
    this.left = (this.active * 100) / this.tips.length
    // console.log(width, '============================width')
  },
  destroyed() {
    window.removeEventListener('mouseup', this.mouseup)
  },
  methods: {
    choose(e) {
      // console.log('e', e)
      this.calc(e)
    },
    calc(touch) {
      this.left = Math.max(0, Math.min(((touch.pageX - this.trackLeft) / this.trackWidth) * 100, 100))
      this.$emit('change', this.current)
    },
    mousedown() {
      this.ifMove = true
    },
    mousemove(e) {
      if (this.ifMove) this.calc(e)
    },
    mouseup() {
      this.ifMove = false
    }
  },
}
</script>

<style lang="less" scoped >
.forced-slider {
  position: relative;
  width: 100%;
  height: auto;

  .forced-slider-wrapper {
    z-index: 1;
    position: relative;
    .forced-slider-thumb {
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      z-index: 2;
      cursor: pointer;
      width: 22px;
      height: 22px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      box-shadow: 0 5px 6px 0 rgba(121, 141, 177, 0.35);
      & .forced-slider-thumb-circle{
        width: 14px;
      height: 14px;
      background: #F2DD73;
      border-radius: 50%;
      box-shadow: 0 5px 20px 0 rgba(121, 141, 177, 0.35);
      z-index: 1;
      }
    }

    .forced-slider-track {
      z-index: 1;
      height: 8px;
      border-radius: 5px;
      background-image: linear-gradient(90deg, #01B700 0%, #F2DD73 55.00000000000001%, #D00A08 100%);
      cursor: pointer;
    }

    .forced-slider-scales {
      display: flex;
      justify-content: space-between;
      position: absolute;
      width: 102%;
      top: -4.6px;
      margin-left: -8px;

      .forced-slider-scale {
        cursor: pointer;
        background: #FFFFFF;
        border: 1px solid #CACACA;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        border-radius: 50%;
      }
    }
  }

  .forced-slider-descriptions {
    display: flex;
    justify-content: space-between;
    font-family: "PingFang SC", serif;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 24px;

    width: 100%;
    margin-top: 10px;
  }

  .forced-tip-wrapper {
    position: relative;
    height: 66px;

    .forced-tip-text {
      position: absolute;
      top: 0;

      line-height: 24px;
      font-size: 14px;
      font-weight: 500;
      font-family: "PingFang SC", serif;

      width: fit-content;
      filter: drop-shadow(0 4px 15px rgba(121, 141, 177, 0.19));
      border-radius: 8px;
      padding: 7px 16px;
      background-color: #FFFFFF;

      --triangle-ratio: 30%;

      &:after {
        display: inline-block;
        content: '';
        position: absolute;
        top: 100%;
        left: calc(var(--triangle-ratio, 30%) + 20%);
        transform: translate(-50%);

        --border-width: 10px;

        width: 0;
        height: 0;
        border-style: solid;
        border-width: calc(1.2 * var(--border-width)) calc(var(--right-border-ratio, 1) * var(--border-width)) 0 calc(var(--left-border-ratio, 1) * var(--border-width));
        border-color: #FFFFFF transparent transparent;

        filter: drop-shadow(0 14px 17px rgba(121, 141, 177, 0.3));
      }
    }
  }

}
</style>
